import React from './react';
import ReactDOM from './react-dom';

//  src='../public/diff-key.png'
/**
 * 只对同级节点进行对比，如果DOM节点跨层级移动，则React不会复用
 * 不同类型的元素会产出不同的结构 ，会销毁老结构，创建新结构
 * 可以通过key标识移动的元素
 * 
 * 1.进行节点更新过程中，会建立一个map映射表，元素的key和value是元素本身。还有一个lastPlacedIndex最后一个复用且不改变位置节点的索引
 * 2.先获取遍历老的vdom，将其放入map中，然后创建一个patch数组进行存放需要移动或者删除操作
 * 3.遍历新的vdom数组，根据key值在map查找中是否有老的dom存在，如果存在进行复用，先更新其节点信息，然后将newVdom的index和lastPlacedIndex进行对比
 * 4.如果小于lastPlacedIndex那么就会把其方入patch中，如果大于就直接复用了。接着删除掉map对应key的属性，然后设置新的lastPlacedIndex。
 * 5.如果在老的map中不存在oldVChild，那么会会把他放入到pacth中并且标识PLACEMENT
 * 6.遍历新的vdom数组完成后，然后遍历patch中找到需要移动的元素，生产一个数组
 * 7.此时keyedOldMap只剩下没有被复用的节点，将其和需要move的节点拼接然后遍历，找到每一个老vdom的真实dom，将其删除
 * 8.遍历patch数组，先获取老的真实dom节点集合，如果标识是PLACEMENT，那么先生产一个新的真实dom，根据mountIndex找到其在childNodes位置上的节点，如果存在就在他前面插入，如果不存在，直接尾部加入
 * 9.如果标识是MOVE，那么先获取到老的dom，根据mountIndex找到其在childNodes位置上的节点，如果存在就直接将老的dom在他前面插入，如果不存在，直接尾部加入（因为之前已经更新过老的dom了）
 * 
 */

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {list:['A','B','C','D','E','F'] };
    
  }
  handleClick=()=>{
    this.setState({
      list:['A','C','E','B','G']
    })
  }
  
  render() {
    return (
      <div>
        <ul>
          {
            this.state.list.map(item=> <li key={item}> {item} </li> )
          }
        </ul>
        <button onClick={this.handleClick}>增加</button>
      </div>
    )
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));
